<template>
  <div class="image-uploader-wrapper">
    <template v-for="(item, index) in images">
      <div class="image-item">
        <img class="main-image" v-if="item.url" :style="{ height: imgHeight + 'px', width: imgHeight + 'px' }" :src="item.url" @click="previewImage(index)" alt="" />
        <img class="main-image" v-else :style="{ height: imgHeight + 'px', width: imgHeight + 'px' }" :src="item.localData ? item.localData : item.localId" @click="previewImage(index)" alt="" />
        <img v-if="canRemove" class="delete-image" @click="removeImage(index)" src="../assets/img/img_upload_delete.png" alt="" />
      </div>
    </template>
    <div class="image-item" v-if="images.length < 9">
      <img id="imageAddBtn" class="main-image" @click="chooseImage" src="../assets/img/img_upload_btn.png" alt="" />
    </div>
  </div>
</template>

<script>

import Config from '../config/config'
import util from '@/util/util'

export default {
  name: 'ImageUploader',
  props: {
    initImages: {
      type: Array,
      default: function() {
        return []
      },
    },
    canRemove: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      imgHeight: 88,
      images: this.initImages,
    }
  },
  methods: {
    setImgHeight: function() {
      var item = document.getElementById('imageAddBtn')
      this.imgHeight = item.offsetWidth
    },
    chooseImage: function() {
      this.setImgHeight()
      var that = this
      var count = 9 - this.images.length
      if (count <= 0) {
        return
      }
      // 上传恐怕需要用jssdk来做
      this.wx.chooseImage({
        count: count,
        sizeType: ['compressed'],
        success: function (res) {
          console.log(res)
          var localIds = res.localIds
          var i = 0
          var upload = function() {
            that.wx.uploadImage({
              localId: localIds[i],
              success: function(res) {
                var image = { localId: localIds[i], serverId: res.serverId }
                that.images.push(image)
                i++
                if (i < localIds.length) {
                  upload()
                } else {
                  if (util.isIOS()) {
                    var j = 0
                    var getImgData = function() {
                      var item = that.images[j]
                      that.wx.getLocalImgData({
                        localId: item.localId,
                        success: function(res) {
                          item.localData = res.localData
                          item.localData = item.localData.replace('jpg', 'jpeg')
                          j++
                          if (j < that.images.length) {
                            getImgData()
                          } else {
                            var images = that.images
                            that.images = []
                            images.forEach(function(img) {
                              that.images.push(img)
                            })
                            that.$emit('imageChanged', that.images)
                          }
                        }
                      })
                    }
                    getImgData()
                  } else {
                    that.$emit('imageChanged', that.images)
                  }
                }
              }
            })
          }
          // 开始上传
          upload()
        }
      })
    },
    previewImage: function(index) {
      var urls = []
      this.images.forEach(function(image) {
        var url = image.url ? image.url : image.localId
        urls.push(url)
      })
      var current = urls[index]
      this.wx.previewImage({ urls: urls, current: current })
    },
    removeImage: function(index) {
      this.images.splice(index, 1)
      this.$emit('imageChanged', this.images)
    }
  }
}

</script>

<style lang="scss" scoped>

.image-uploader-wrapper {
  margin-top: 1px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  .image-item {
    width: 24%;
    padding: 3px;
    position: relative;
    vertical-align: top;
    box-sizing: border-box;
    display: inline-block;
    .main-image {
      width: 100%;
    }
    .delete-image {
      position: absolute;
      padding: 5px;
      top: -2px;
      right: -5px;
      width: 30px;
      height: 30px;
    }
  }
}

</style>
